<template>
	<view class="flex-col group_1">
		<view class="flex-col">
			<view class="flex-col section_1">
				<text class="text_1">请选择充值金额</text>
				<view class="grid">
					<view class="flex-col grid-item" v-for="(item,index) in amounts" :key="index"
						:class="{select:index == nowSelectA}" @click="nowSelectA = index">
						<view class="justify-center top-group">
							<image src="/static/local/16403089589061038977.png" class="image_2" />
							<text class="text_4">{{item.coin_num}}</text>
						</view>
						<text class="text_6">￥{{item.recharge_amount}}</text>
					</view>
				</view>
			</view>
			<view class="flex-col section_10">
				<text>选择支付方式</text>
				<view class="center-group justify-between view_8" v-for="item in payMents" :key="item.sign"
					@click="choose(item.sign)">
					<view class="flex-row">
						<image :src="item.logo" class="image_12" />
						<text class="text_23">{{item.name}}</text>
					</view>
					<image src="/static/local/5d02b47de7d570a6fcfcbb4d3e9ca5b4.png" class="image_14 image_15"
						v-if="item.sign == nowPayMents" />
					<image src="/static/local/bd0de805aca0fec835ae680a644b85e2.png" class="image_14 image_17" v-else />
				</view>
			</view>
		</view>
		<view class="flex-col items-center button" @click="startRecharge">
			<text>充值</text>
		</view>
		<!-- vk万能支付组件 -->
		<vk-uni-pay ref="vkPay" :query-payment-action="vkPay.queryPaymentAction" :status.sync="vkPay.status"
			:code-url.sync="vkPay.codeUrl" :page-show="vkPay.pageShow" :polling="vkPay.polling"></vk-uni-pay>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import vkUniPay from "@/uni_modules/vk-uni-pay/components/vk-uni-pay/vk-uni-pay"
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		components: { vkUniPay },
		data() {
			// 页面数据变量
			return {
				// 充值金额
				amounts: [],
				nowSelectA: 0,
				// 支付方式
				payMents: [{
					"name": "微信支付",
					"logo": "/static/wxpay.png",
					"sign": "wxpay",
					"enabled": 1
				}, {
					"name": "支付宝支付",
					"logo": "/static/alipay.png",
					"sign": "alipay",
					"enabled": 1
				}],
				nowPayMents: 'wxpay',
				vkPay: {
					queryPaymentAction: {
						name: "router", // 云函数名称
						action: "client/payment/kh/query", // 路由模式下云函数地址
						actionKey: "$url", // 路由模式下云函数地址的识别key
						dataKey: "data" // 路由模式下云函数请求参数的识别key
					},
					// PC支付的付款二维码地址
					codeUrl: "",
					// 当前支付状态 0:等待发起支付 1:支付中 2:已支付
					status: 0,
					// 当前页面是否显示
					pageShow: true,
					// 启用轮询检测订单支付状态（仅h5支付有效）
					polling: true,
				}
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				// 获取充值金额列表
				uni.vk.callFunction({
					url: 'client/accout/kh/getCoinList',
					title: "请求中...",
					success(data) {
						that.amounts = data.rows
					}
				})
			},
			// 选择付款方式
			choose(e) {
				this.nowPayMents = e
			},
			// 开始充值
			startRecharge() {
				if (this.nowSelectA < 0) {
					this.showToast('请选择充值金额', 'warning')
					return
				}
				if (this.nowPayMents == '') {
					this.showToast('请选择支付方式', 'warning')
					return
				}
				// 在本次方法中固定选中项，防止请求时切换选择导致出错
				const nowS = that.amounts[that.nowSelectA]
				//先创建订单
				uni.vk.callFunction({
					url: 'client/order/kh/create/coin',
					title: "创建订单中...",
					data: { amount: nowS.recharge_amount * 100 }, // 付款金额，单位为分，这里要乘以100
					success(data) {
						// 开始支付
						that.$refs.vkPay.createPayment({
							action: {
								name: "router",
								action: "client/payment/kh/create",
								actionKey: "$url",
								dataKey: "data"
							},
							data: { provider: that.nowPayMents, oid: data.order_id },
							success: res => {
								vk.callFunction({
									url: 'client/accout/kh/updataInfo',
									title: '请求中...',
									data: {
										amount: nowS.coin_num, // 学习币增加数
										useOrRecharge: 'recharge',
										need_user_info: true
									},
									success: function(data) {
										uni.redirectTo({
											url: `/pages/payment/success?amount=${nowS.recharge_amount}&type=2`
										});
									}
								})
							},
							// 失败回调
							fail: res => {
								if (res.failType === "create") {
									// 创建支付失败时提示
									console.log(res.msg);
								} else if (res.failType === "request") {
									// 请求支付失败时提示
									that.toast("请求支付失败");
								} else if (res.failType === "result") {
									// 支付结果失败时提示
									that.toast("支付失败");
								}
							},
							// 取消回调
							cancel: res => {
								that.toast("用户取消支付");
							}
						})
					}
				})
			},
			showToast(title, type) {
				this.$refs.uToast.show({
					title: title,
					type: type,
					duration: 1500
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.group_1 {
		flex: 1 1 auto;
		overflow-y: auto;
		background: #F5F5F5;

		.button {
			margin: 138rpx 30rpx 0;
			padding: 26rpx 0 24rpx;
			color: rgb(255, 255, 255);
			font-size: 32rpx;
			line-height: 38rpx;
			white-space: nowrap;
			background-color: rgb(51, 51, 51);
			border-radius: 44rpx;
		}

		.section_1 {
			padding: 28rpx 28rpx 44rpx;
			background-color: rgb(255, 255, 255);

			.text_1 {
				color: rgb(51, 51, 51);
				font-size: 32rpx;
				line-height: 38rpx;
				white-space: nowrap;
			}

			.grid {
				margin-top: 39rpx;
				height: 472rpx;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-row-gap: 22rpx;
				grid-column-gap: 22rpx;

				.grid-item {
					padding: 33rpx 0 28rpx;
					background-color: rgb(244, 246, 249);
					border-radius: 4rpx;
					height: 144rpx;

					.top-group {
						color: rgb(51, 51, 51);
						font-size: 32rpx;
						line-height: 38rpx;
						white-space: nowrap;

						.text_4 {
							margin-left: 9rpx;
						}
					}

					.text_6 {
						margin-top: 19rpx;
						align-self: center;
						color: rgb(153, 153, 153);
						font-size: 22rpx;
						line-height: 26rpx;
						white-space: nowrap;
					}
				}

				.select {
					background-image: url('/static/local/99e3a5dcf0a08caa6af5fd110210459f.png');
					background-position: 0px 0px;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.image_2 {
					margin: 5rpx 0;
					width: 30rpx;
					height: 29rpx;
				}
			}
		}

		.section_10 {
			margin-top: 22rpx;
			padding: 40rpx 40rpx 45rpx;
			color: rgb(51, 51, 51);
			font-size: 32rpx;
			line-height: 38rpx;
			white-space: nowrap;
			background-color: rgb(255, 255, 255);

			.center-group {
				padding-left: 24rpx;
				padding-right: 18rpx;

				.image_14 {
					width: 40rpx;
					height: 40rpx;
				}

				.image_15 {
					margin: 4rpx 0 6rpx;
				}

				.image_17 {
					margin: 6rpx 0 4rpx;
				}

				.image_12 {
					width: 50rpx;
					height: 50rpx;
				}

				.text_23 {
					margin: 8rpx 0 4rpx 18rpx;
				}
			}

			.view_8 {
				margin-top: 49rpx;
			}
		}
	}
</style>
